
// 来自IE时代的样式影响
// select{box-sizing: border-box;}
// input{box-sizing: contnet-box;}
// textarea{
//   -webkit-appearance: textarea;
//   background-color: white;
//   -webkit-rtl-ordering: logical;
//   flex-direction: column;
//   resize: auto;
//   cursor: text;
//   white-space: pre-wrap;
//   word-wrap: break-word;
//   border: 1px solid initial;
//   padding: 2px;
// }
// input[type="radio" i] {margin: 3px 3px 0px 5px;}
// input[type="radio" i] {-webkit-appearance: radio;box-sizing: border-box;}
// input[type="radio" i], input[type="checkbox" i] {
//   background-color: initial;
//   cursor: default;
//   margin: 3px 0.5ex;
//   padding: initial;
//   border: initial;
// }

// 浏览器前缀
.c3p(@key,@value){
  -webkit-@{key}:@value;
  -moz-@{key}:@value;
  -ms-@{key}:@value;
  -o-@{key}:@value;
  @{key}:@value;
}

.border-box(
  px
  ,@w:160,@h:32
  ,@pt:2,@pb:2,@pl:10,@pr:10
  ,@bt:1,@bb:1,@bl:1,@br:1
  ){
  height:unit( (@h - @pt - @pb - @bt - @bb),px);
  width:unit( (@w - @pl - @pr - @bl - @br),px);
  .bp(px
    ,@pt,@pb,@pl,@pr
    ,@bt,@bb,@bl,@br
  );
}
.border-box(
  rem,@baseFontSize:75
  ,@w:160,@h:32
  ,@pt:2,@pb:2,@pl:10,@pr:10
  ,@bt:1,@bb:1,@bl:1,@br:1
  ){
  .px2rem( height , (@h - @pt - @pb - @bt - @bb) );
  .px2rem( width , (@w - @pl - @pr - @bl - @br) );
  .px2rem( padding-top , @pt);
  .bp(rem
    ,@pt,@pb,@pl,@pr
    ,@bt,@bb,@bl,@br
  );
}

.form(){
  .nobg(){
    border:none;
    outline:0;
    background:none;
  }
  .nobg{
    .nobg();
  }
  .btn(){
    padding:0;
    border:none;
    outline:0;
    background:none;
    color:inherit;
    cursor: pointer;
    &.disabled,
    &[disabled]{
      cursor: ~'not-allowed';
    }
  }
  .buttonColor(){
    &:hover{}
    &:disabled{}
  }

  input[type=text],
  input[type=password]{
    .nobg();
  }

  input[type=checkbox]{}
  input[type=radio]{}
  .radio-hidden,
  .checkbox-hidden{
    display:none;
  }

  input[type=reset]{}
  input[type=submit]{}
  input[type=button]{}

  button[type=reset]{}
  button[type=submit]{}
  button[type=button]{}

  .btn,
  [type="submit"],
  [type="reset"],
  [type="button"]{
    .btn();
  }

  .input-box{
    .input-text{
      display:block;
      text-indent:1em;
      height:100%;width:100%;
      padding:0;
      border:none;
      background:none;
      outline: 0;
    }
  }
  .textarea-box{
    .input-textarea{
      display:block;
      height:100%;width:100%;
      padding:0.5em 1em;
      border:none;
      background:none;
      outline: 0; 
    }
  }
  .select-box{
    .reset-select{
      // box-sizing: border-box;//默认
      width:100%;
      height:20px;//默认
      border:none;
      background:none;
      .cssPrefix(appearance,none);
      cursor: pointer;
      &::-ms-expand{display:none;}  
      &:focus{outline:0;}
    }
  }
}


.iosformstyle(@bfs,@color){
  .ios-input-group{
    margin-top:unit(30/@bfs,rem);
    border-top:unit(1/@bfs,rem) solid lighten(#000,90%);
  }
  .ios-layout-box{
    display:box;//OLD - Android 4.4-
    display:-webkit-box;//OLD - iOS 6-, Safari 3.1-6
    display:-moz-box;//OLD - Firefox 19- (buggy but mostly works)
    display:-ms-flexbox;//TWEENER - IE 10
    display:-webkit-flex;//NEW - Chrome
    display:flex;//NEW, Spec - Opera 12.1, Firefox 20+
    // 主轴方向
    -webkit-flex-wrap: nowrap; /* Safari */
    flex-wrap:nowrap;

    -webkit-box-orient: horizontal;//09版
    .cssPrefix(flex-direction,row);//12版
    -webkit-box-pack: justify;//09版
    .cssPrefix(justify-content,space-between);//12版
    .cssPrefix(align-items,center);

    font-size:unit(28/@bfs,rem);

    .cssPrefix(box-sizing,border-box);
    height:unit(100/@bfs,rem);
    padding:0 unit(40/@bfs,rem);
    border-bottom:unit(1/@bfs,rem) solid lighten(#000,90%);
    background-color:#fff;
    .ios-label{
      flex:1 1 auto;
      padding-right:1em;
      white-space: nowrap;
      color:lighten(#000,20%);
    }
    .ios-input-box{
      position: relative;
      font-size:unit(24/@bfs,rem);
      line-height:unit(100/@bfs,rem);
      flex-basis:10rem;
    }
    .ios-switch-group{
      position: absolute;
      top:0;bottom:0;right:0;
      .dis-ib();
      font-size:0;
      height:unit(60/@bfs,rem);
      width:unit(200/@bfs,rem);
      margin:auto;
      border:unit(1/@bfs,rem) solid lighten(#000,80%);
      background-color:#fff;
      .radio-switch{
        .dis-ib();
        font-size:unit(28/@bfs,rem);
        height:100%;
        width:50%;
      }
      .radio-hidden{
        &+.ios-switch{
          .dis-ib();
          vertical-align: top;
          text-align:center;
          line-height:unit(60/@bfs,rem);
          width:100%;height:100%;
          border:unit(1/@bfs,rem) solid lighten(#000,80%);
          background-color:#fff;
          color:transparent;
        }
        &:checked+.ios-switch{
          border:unit(1/@bfs,rem) solid lighten(#000,80%);
          color:#fff;
        }
        &.radio-switch-true:checked+.ios-switch{
          background-color:@color;
        }
        &.radio-switch-false:checked+.ios-switch{
          background-color:lighten(#000,70%);
        }
      }
      
    }
    .ios-select-box{
      flex-basis:10rem;
      text-align: right;
    }
    .ios-input-file{
      position: absolute;
      top:1px;left:1px;
      width:1px;height:1px;
      opacity: 0;
    }
    .ios-filename{
    }
    .ios-input-self{
      .cssPrefix(box-sizing,border-box);
      display: block;
      font-size:unit(30/@bfs,rem);
      text-align: inherit;
      width:100%;
      padding:0;
      border:none;
      &::-webkit-input-placeholder{color:lighten(#000,80%);}
      &::-moz-placeholder{color:lighten(#000,80%);}
      &:-moz-placeholder{color:lighten(#000,80%);}
      &:-ms-input-placeholder{color:lighten(#000,80%);}
      &:focus{outline:0;}
    }
    .select-icon{
      font-size:1.5em;
      margin-left:unit(30/@bfs,rem);
      color:lighten(#000,80%);
    }
    .def-btn{
      .cssPrefix(border-radius,5px);
      height:unit(60/@bfs,rem);
      padding:0 unit(33/@bfs,rem);
      background-color:@color;
      color:#fff;
      white-space: nowrap;
    }
  }
  span,
  a,input,
  button{
    &.ios-block-btn{
      display: block;
      text-align: center;
      font-size:unit(24/@bfs,rem);
      line-height:unit(80/@bfs,rem);
      width:100%;
      padding:0;
      border:1px solid lighten(#000,90);
      .cssPrefix(border-radius,5px);
      background-color:@color;
      color:#fff;
      &.inverse{
        border:1px solid @color;
        background-color:transparent;
        color:@color;
      }
    }
    &.ios-vCode{
      flex: none;
      height:unit(68/@bfs,rem);
      width:unit(160/@bfs,rem);
      padding:0;
      border:none;
    }
    &.appearfileuploadbtn{
      flex: none;
      display:inline-block;
      line-height:unit(60/@bfs,rem);
      padding:0 unit(33/@bfs,rem);
      border:none;
      .cssPrefix(border-radius,5px);
      background-color:@color;
      color:#fff;
      white-space: nowrap;
    }
  }
}



.appearSelect{}
.appearRadio(){}
.appearCheckbox(){}


.ui-switch {
  display: inline-block;
  width: 44px;
  height: 26px;
  border: 2px solid;
  border-radius: 26px;
  background-color: currentColor;
  box-sizing: border-box;
  color: $silver; 
  -webkit-transition: all .2s;
  transition: all .2s;   
  cursor: pointer;
}

.ui-switch::before {
	content: '';
	display: block;
	width: 22px;
	height: 22px;
	border-radius: 22px;
	background-color: $white;
	-webkit-transition: margin-left .2s;
    transition: margin-left .2s; 
}

:checked + .ui-switch {
  color: $blue;
}
:checked + .ui-switch::before {
  margin-left: 18px;
}

:disabled + .ui-switch {
  opacity: .38;
  cursor: default;
}

// 部分模块跳级直升3.0
// 3.0以上版本部分模块设定.def(模块名)方法用于导入时默认调用，
// 节约常规调用时间

// 目前尚未修改，从某个角度来说目前不可用
// 预计增加ios预配置